<template>
	<view class="content" :style="{ paddingTop: configStore.paddingTop + 10 + 'px' }">
		<hearbar></hearbar>
		<view style="background: white;">
			<up-cell-group>
				<up-cell title="昵称" :isLink="true" @click="edit('nick_name')">
					<template #value>
						<text>{{ formData.nick_name }}</text>
					</template>
				</up-cell>
				<up-cell title="性别" :isLink="true" @click="edit('sex')">
					<template #value>
						<text>{{ formData.sex === 1 ? "男" : '女' }}</text>
					</template>
				</up-cell>
				<up-cell title="头像" :isLink="true" @click="choseImg">
					<template #value>
						<up-avatar size="30" :src='formData.img_url'></up-avatar>
					</template>
				</up-cell>
				<up-cell title="个性签名" :isLink="true" @click="edit('sgin')">
					<template #value>
						<text>{{ formData.sgin }}</text>
					</template>
				</up-cell>
			</up-cell-group>
			<view style="width: 100%;">
				<up-button @click="reset">注销登录</up-button>
			</view>
		</view>
	</view>
	<up-popup v-model:show="editShow">
		<view class="flex flex-between p-a-ll">
			<view style="width: 80upx">
				<up-button type="primary" size="mini" @click="editShow = false">
					取消
				</up-button>
			</view>
			<view style="width: 80upx;">
				<up-button type="primary" size="mini" @click="editComfirm">
					确定
				</up-button>
			</view>
		</view>
		<up-input placeholder="请输入内容" border="surround" v-model="editContent.content"
			v-if="editContent.params === 'nick_name'||'sgin'"></up-input>
		<up-radio-group v-model="editContent.content" v-else>
			<up-radio label="男" :name="1">
			</up-radio>
			<up-radio label="女" :name="2">
			</up-radio>
		</up-radio-group>
	</up-popup>
</template>
<script>
export default {
	options: {
		styleIsolation: 'shared'
	}
}
</script>
<script setup>
import {
	ref,
	toRaw,
	onMounted,
	reactive
} from "vue";
import {
	useConfigStore
} from "../../stores/modules/config"
import {
	uploadFile,
	updateUserInfo,
	getUserInfo,
	loginout
} from "../../utils/api";
const configStore = useConfigStore();
const formData = reactive({
	nick_name: "",
	sex: "",
	img_url: "",
	sgin:""
})
const editShow = ref(false);
const editContent = reactive({
	content: "",
	params: "",
});
const img_url = ref("");
const edit = (type) => {
	editShow.value = true
	Object.assign(editContent, {
		content: formData[type],
		params: type
	});
}
const editComfirm = () => {
	editShow.value = false;
	Object.assign(formData, {
		[editContent.params]: editContent.content,
	});
	updateUserInfo(formData).then((res) => {
		if (res.code === 200) {
			uni.showToast({
				title: "修改成功",
				icon: "none"
			})
		}
	});
}
onMounted(() => {
	getUserInfo().then((res) => {
		if (res.code === 200) {
			Object.assign(formData, res.data);
		}
	})
})
const choseImg = () => {
	uni.chooseImage({
		count: 1, // 默认9，设置图片的数量
		sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
		success: (chooseImageRes) => {
			const tempFilePaths = chooseImageRes.tempFilePaths;
			uploadFile({
				url: tempFilePaths[0]
			}).then(((res) => {
				formData.img_url = res.data.url;
				updateUserInfo({
					img_url: res.data.url
				}).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: "修改成功",
						})
					}
				})
			}))
		},
		fail: (chooseImageErr) => {
			console.error('选择图片失败', chooseImageErr);
		}
	});
}
const reset = () => {
	loginout().then((res) => {
		if (res.code === 200) {
			uni.showToast({
				title: "注销成功",
			})
			setTimeout(() => {
				uni.redirectTo({
					url: "/pages/login/index"
				})
			}, 200);
		}
	}).catch(() => { })
}
</script>

<style lang="less" scoped></style>